<template>
  <div>
    <h2>浪里行舟</h2>
    <h2>{{ msg }}</h2>
    <button @click="modefiedDoo">验证是否是响应式的</button>
    <child-com1
      :foo="foo"
      :boo="boo"
      :coo="coo"
      :doo="doo"
      :p-child="child1"
      title="前端工匠"
      @test1="getTest1Value"
      style="background-color: hotpink;"
    ></child-com1>
  </div>
</template>
<script>
// 路由的懒加载webpack>2.4以上，使用该方式替代了require.ensure
const childCom1 = () => import('./subComponents/childCom1.vue');
/* 三种通信情景：
1.父子通信   vuex  bus(通常用更简单的父子通信或子父通信代替了)     $attrs和$listeners provide/inject
2.跨级通信   vuex  bus  $attrs和$listeners provide/inject
3.兄弟通信   vuex  bus  能实现兄弟通信的只有事件中心和vuex两种方式
特别注意：1,2,3都可以的是vuex和bus中央总线的方式(就是空Event+ Event.$emit和Event.$on)
*/
//  组件的跨级通信-对于这种层级很深的跨级数据传递
// 1.子元素中的每一级（最后一级不用）都需要绑定$attrs。当前层的$attrs中声明的属性等于
// 父级中不包括style、class以及props声明的属性
// 2.inheritAttrs:false 设置值为false时，this.$attrs中可以刨除挂载在当前组件根所放置的父组件中且没有在props声明的属性的渲染（也不包括class和style设置样式的属性）
// 3.$listeners属性用于保存父级组件中不带.native修饰符的事件(v-on.native:事件名称="")
export default {
  data() {
    return {
      foo: 'javascript',
      boo: 'html',
      coo: 'css',
      doo: 'vue',
      // 玄孙组件childCom3回传的值
      msg: '',
      // 短横线连接的属性
      child1: '从公已觉十年迟'
    };
  },
  methods: {
    // 同子组件向父组件传值的方式完全一样，v-bind="$attrs" v-on="$listeners"可以看成层级更深的父子和子父传值
    // 发送：this.$emit('根组件中要绑定的方法名test1',向根组件的传值props)
    // 接收：@test1="getDataFromSon" getDataFromSon(props){}
    getTest1Value(attr) {
      this.msg = attr;
      console.log('玄孙组件回传的值:' + this.msg);
    },
    // 验证这种传值是否是响应式的
    modefiedDoo() {
      // 将doo值更改后，后面所有依赖视图都发生改变，这种传值时响应式的
      this.doo = 'vue2.0';
    }
  },
  components: {
    'child-com1': childCom1
  }
};
</script>
<style lang="less" scoped>
div {
  h2 {
    font-size: 40px;
    color: red;
  }
}
</style>
